<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪刀石头布</title>
    <style>
        .p1 {
            color: blue;
            border: 1px solid red;
            display: inline-block;
            padding: 10px 20px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
    <!-- 引入外部jquery文件 -->
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        $(document).ready(function() {
            // 定义数据数组
            var data = new Array("石头", "剪刀", "布");
            // 定义一个定时器
            var myInterval = null;
            // 开始按钮的事件
            $("#start").click(function() {
                if (null == myInterval) {
                    // setInterval() 间隔时间内不断调用函数，相当于1个定时器
                    myInterval = setInterval(function() {
                        // Math.random() 取0~1之间的随机数，包括小数
                        // Math.ceil() 数字向上舍入取最接近的整数
                        var index1 = Math.ceil(Math.random() * 3) - 1;
                        var index2 = Math.ceil(Math.random() * 3) - 1;
                        // 设置stone-1元素的文本
                        $("#stone-1").text(data[index1]);
                        // 设置stone-2元素的文本
                        $("#stone-2").text(data[index2]);
                    }, 50);
                }

            });
            // 停止按钮的事件
            $("#stop").click(function() {
                if (null != myInterval) {
                    // 关闭定时器函数
                    clearInterval(myInterval);
                    myInterval = null;
                }

            });
        });
    </script>
</head>

<body>
    <span class="p1" id="stone-1">
        石头
    </span> VS
    <span class="p1" id="stone-2">
        石头
    </span>

    <div style="margin-top: 20px;">
        <button id="start">开始</button>
        <button id="stop">停止</button>
    </div>

</body>

</html>